<template>
  <div v-if="isDragging" class="drag-helper">
    <div class="drag-info">
      <div class="position-info">
        <span>位置: {{ Math.round(position.x) }}, {{ Math.round(position.y) }}</span>
      </div>
      <div class="tips">
        <div class="tip">
          <kbd>Ctrl</kbd> + 拖拽：网格吸附
        </div>
        <div class="tip">
          <kbd>Shift</kbd> + 拖拽：水平/垂直锁定
        </div>
      </div>
    </div>
    
    <!-- 网格线（当按住Ctrl时显示） -->
    <div v-if="showGrid" class="grid-overlay">
      <svg class="grid-svg" :width="canvasSize.width" :height="canvasSize.height">
        <defs>
          <pattern id="grid" :width="gridSize" :height="gridSize" patternUnits="userSpaceOnUse">
            <path 
              :d="`M ${gridSize} 0 L 0 0 0 ${gridSize}`" 
              fill="none" 
              stroke="#409EFF" 
              stroke-width="0.5" 
              opacity="0.3"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
      </svg>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  isDragging: {
    type: Boolean,
    default: false
  },
  position: {
    type: Object,
    default: () => ({ x: 0, y: 0 })
  },
  showGrid: {
    type: Boolean,
    default: false
  },
  gridSize: {
    type: Number,
    default: 10
  },
  canvasSize: {
    type: Object,
    default: () => ({ width: 0, height: 0 })
  }
})

// 监听拖拽状态，添加/移除键盘事件监听
watch(() => props.isDragging, (isDragging) => {
  if (isDragging) {
    document.addEventListener('keydown', handleKeyDown)
    document.addEventListener('keyup', handleKeyUp)
  } else {
    document.removeEventListener('keydown', handleKeyDown)
    document.removeEventListener('keyup', handleKeyUp)
  }
})

const handleKeyDown = (e) => {
  // 这里可以处理键盘快捷键
  if (e.key === 'Escape') {
    // 取消拖拽
    document.dispatchEvent(new Event('cancelDrag'))
  }
}

const handleKeyUp = (e) => {
  // 键盘释放处理
}
</script>

<style scoped>
.drag-helper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 999;
}

.drag-info {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.position-info {
  margin-bottom: 8px;
  font-weight: 600;
  color: #409EFF;
}

.tips {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tip {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.8;
}

kbd {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 10px;
  font-family: monospace;
}

.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.grid-svg {
  position: absolute;
  top: 0;
  left: 0;
}

/* 动画效果 */
.drag-helper {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

